<template>
	<view class="">
		<form @submit="formSubmit">
					<scroll-view scroll-y>
						
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									Email
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="email" placeholder="输入Eamil" :value="email"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									QQ
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="qq" placeholder="输入QQ" :value="qq"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									Http
								</view>
							</view>
							<view class="right">
								<view class="right">
									<input class="uni-input" name="http" placeholder="输入Http" :value="http"/>
											
								</view>			
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									移动电话
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="phone" placeholder="输入号码" :value="phone"/>
										
							</view>
						</view>
						
						
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									宿舍地址
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="dormAddress" placeholder="输入地址" :value="dormAddress"/>
										
							</view>
						</view>
						
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									宿舍电话
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="dormPhone" placeholder="输入电话" :value="dormPhone"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									家庭所在地
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="familyLocation" placeholder="输入地址" :value="familyLocation"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									家庭地址
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="familyAddress" placeholder="输入地址" :value="familyAddress"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									家庭邮编 
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="familyZip" placeholder="输入家庭邮编 " :value="familyZip"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									家庭电话
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="familyPhone" placeholder="输入号码" :value="familyPhone"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									微信号
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="wechatId" placeholder="微信号" :value="wechatId"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									紧急联系人
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="emergencyContact" placeholder="输入紧急联系人" :value="emergencyContact"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									紧急联系人电话
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="emergencyPhone" placeholder="输入号码" :value="emergencyPhone"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									紧急联系人与本人关系
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="emergencyRelationship" placeholder="输入关系" :value="emergencyRelationship"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									通讯地址
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="communicationAddress" placeholder="输入地址" :value="communicationAddress"/>
										
							</view>
						</view>
						
						
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									邮政编码
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="postalCode" placeholder="输入邮政编码" :value="postalCode"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									爱好
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="hobbies" placeholder="输入爱好" :value="hobbies"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									特长
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="specialSkills" placeholder="输入特长(注明级别)" :value="specialSkills"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									监护人1姓名
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="guardianName1" placeholder="输入姓名" :value="guardianName1"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									监护人1证件类型
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="guardianIdType1" placeholder="输入类型" :value="guardianIdType1"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									监护人1证件号
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="guardianIdNumber1" placeholder="输入证件号" :value="guardianIdNumber1"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									监护人2姓名
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="guardianName2" placeholder="输入姓名" :value="guardianName2"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									监护人2证件类型
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="guardianIdType2" placeholder="输入类型" :value="guardianIdType2"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									监护人2证件号
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="guardianIdNumber2" placeholder="输入证件号" :value="guardianIdNumber2"/>
										
							</view>
						</view>
						
				</scroll-view>		
						<view class="uni-btn-v">
							<button form-type="submit" class="but">确认提交</button>
						
						</view>
		</form>
	</view>
</template>

<script setup>
import { ref } from 'vue';
const email =ref('');//email
const qq =ref('');//QQ
const http =ref('');//网页
const phone =ref('');//移动电话
const dormAddress =ref('');//宿舍地址
const dormPhone =ref('');//宿舍电话
const familyLocation =ref('');//家庭所在地
const familyAddress =ref('');//家庭地址
const familyZip =ref('');//家庭邮编 
const familyPhone =ref('');//家庭电话
const wechatId =ref('');//微信号
const emergencyContact =ref('');//紧急联系人
const emergencyPhone =ref('');//紧急联系人电话
const emergencyRelationship =ref('');//紧急联系人与本人关系
const communicationAddress =ref('');//通讯地址
const postalCode =ref('');//邮政编码
const hobbies =ref('');//爱好
const specialSkills =ref('');//特长
const guardianName1 =ref('');//监护人姓名1
const guardianIdType1 =ref('');//监护人证件类型1
const guardianIdNumber1 =ref('');//监护人证件号1
const guardianName2 =ref('');//监护人姓名2
const guardianIdType2 =ref('');//监护人证件类型2
const guardianIdNumber2 =ref('');//监护人证件号2

const formSubmit = (e)=>{
	console.log(e);
}



</script>

<style lang='scss' scoped>
	 scroll-view{
	 	height:73vh;
	 	padding: 20rpx 0;
	 }
	 .rows{
	 	display: flex;
	 	justify-content: space-between;
	 	font-size: 26rpx;
	 	line-height: 60rpx;
	 	border-bottom: 1rpx solid #ccc;
	 	margin-bottom: 20rpx;
	 	.left{
	 		display: flex;
	 		justify-content: space-between;
	 		.star{
	 			color:red;
	 		}
	 	}
	 	.right{
	 		display: flex;
	 		justify-content: space-between;
	 		align-items: center;
	 		text-align: right;
	 		color:$xx-color-body;
	 	}
	 }
	 
	 .but{
	 			width: 500rpx;
	 			height: 80rpx;
	 			border-radius: 40rpx;
	 			background: $xx-color-body;
	 			color: #fff;
	 }
	 button::after{ border: none;}
	 button{
	 	line-height:80rpx;
	 }      
</style>